<template>
    <div>
        <div class="right-t">
            <div class="right-t-left">
                <span class="right-t-left-item" :class="showTitle===1?'active':''" @click="showTitle=1">全部</span>
                <span class="right-t-left-item" :class="showTitle===2?'active':''" @click="showTitle=2">我创建的</span>
                <span class="right-t-left-item" :class="showTitle===3?'active':''" @click="showTitle=3">我加入到</span>
                <span class="right-t-left-item" :class="showTitle===4?'active':''" @click="showTitle=4">我课程的</span>
            </div>
            <div class="right-t-right">
                创建
            </div>
        </div>
        <div class="right-b">
            <div class="right-b-con">
                <div class="right-b-con-item" >
                    <div class="right-b-con-item-left">
                        <div class="right-b-con-item-left-lf" >
                        </div>
                        <div class="right-b-con-item-left-rg">
                            <div class="right-b-con-item-left-rg-title">
                                
                            </div>
                            <div class="right-b-con-item-left-rg-time">
                                已练习0次0分钟
                            </div>
                        </div>
                    </div>
                    <div class="right-b-con-item-right">
                        <el-icon class="right-b-con-item-right-top" color="hotpink" :size="22"><Clock /></el-icon>
                        <div class="right-b-con-item-right-bom">
                            未开始
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
  
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
    name: "Studio",
});
</script>
  
<script setup lang="ts">
import {Clock } from '@element-plus/icons-vue'



// 控制选择的标题样式
const showTitle = ref(1)


</script>
  
<style scoped lang="scss">
    .active{
        background-color: #f93684;
        color: #fff;
    }
    .right-t{
        padding: 26px 30px;
        border-radius: 4px;
        background-color: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right-t-left{
            .right-t-left-item{
                display: inline-block;
                font-size: 14px;
                border-radius: 4px;
                padding: 9px 12px;
                margin-right: 24px;
                margin-bottom: 10px;
            }
        }
        .right-t-right{
            width: 84px;
            height: 32px;
            line-height: 32px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            background: #f93684;
            border-radius: 16px;
        }
    }
    .right-b{
        overflow: hidden;
        padding: 0 30px 10px;
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 4px;
        min-height: 700px;
        .right-b-con{
            margin-top: 20px;
            padding-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .right-b-con-item{
                box-sizing: border-box;
                padding-top: 20px;
                padding-bottom: 20px;
                width: 100%;
                border-bottom: 1px solid #e3e3e3;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .right-b-con-item-left{
                    display: flex;
                    .right-b-con-item-left-lf{
                        width: 169px;
                        height: 101px;
                        border-radius: 4px;
                        background-size: cover;
                        background-image: 'url(@/assets/404_images/404.png)';
                        background-position: 50%;
                        margin-right: 20px;
                    }
                    .right-b-con-item-left-rg{
                        .right-b-con-item-left-rg-title{
                            font-weight: 700;
                            font-size: 16px;
                            color: #111;
                        }
                        .right-b-con-item-left-rg-time{
                            margin-top: 25px;
                            font-size: 14px;
                            color: #7d8090;
                        }
                    }
                }
                .right-b-con-item-right{
                    text-align: center;
                    .right-b-con-item-right-top{
                        width: 22px;
                        height: 22px;
                    }
                    .right-b-con-item-right-bom{
                        margin-top: 9px;
                        font-size: 14px;
                        color: #7d8090;
                    }
                }
            }
        }
    }
</style>